//组件结构
<template>
  <div class="demo">
    <h2>学习名称:{{ schoolName }}</h2>
    <h2>学校地址:{{ address }}</h2>
    <button @click="changeName">修改名称</button>
  </div>
</template>

//组件交互
<script>
//Vue.extend()可以省略
export default {
  name: 'MySchool',
  data() {
    return {
      schoolName: '尚硅谷',
      address: '北京'
    }
  },
  methods:
      {
        changeName() {
          this.schoolName = '黑马程序员'
        }
      }
};
// 为了实现组件化, 即别人可以用Import引入,需要对school组件化
//共有三种暴露方式
//1.单点暴露 export const school = Vue.extend({})   引入格式 Import {school} from './MySchool'
//2.同一暴露 export {school}                        引入格式 Import {school} from './MySchool'
//3.默认暴露 export default school                  引入格式 Import school from './MySchool'

</script>

//组件的样式
<style>
  .demo {
    background-color: skyblue;
  }
</style>